<!--
 * @Author: Damon Liu
 * @Date: 2025-04-27 15:17:42
 * @LastEditors: Damon Liu
 * @LastEditTime: 2025-04-29 17:40:44
 * @Description: 日程列表组件
-->
<template>
    <div class="schedule-list">
        <div class="filter-container">
            <div style="width: 0; flex: 1; display: flex;">
                <div v-for="(eventType, index) in EVENT_TYPES" :key="index">
                    <a-tag :color="eventType.color">
                        {{ eventType.text }}
                    </a-tag>
                </div>
            </div>
            <a-range-picker
                v-model:value="dateRange"
                @change="handleDateRangeChange"
                v-if="showDateFilter"
            />
            <a-select
                v-model:value="typeFilter"
                style="width: 120px; margin-left: 8px"
                placeholder="事件类型"
                allowClear
                @change="handleTypeFilterChange"
            >
                <a-select-option v-for="(eventType, index) in EVENT_TYPES" :key="index" :value="eventType.value">
                    {{ eventType.text }}
                </a-select-option>
            </a-select>
        </div>
        <a-table :dataSource="filteredSchedules" :columns="columns" bordered>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'title'">
                    <div class="schedule-title">
                        <a-tag :color="getEventTypeColor(record.type)">
                            {{ getEventTypeText(record.type) }}
                        </a-tag>
                        <span>{{ record.title }}</span>
                    </div>
                </template>
                <template v-if="column.key === 'start'">
                    {{ formatDateTime(record.start) }}
                </template>
                <template v-if="column.key === 'end'">
                    {{ formatDateTime(record.end) }}
                </template>
                <template v-if="column.key === 'reminder'">
                    <div v-if="record.reminder" class="reminder-time">
                        <bell-outlined />
                        {{ formatDateTime(record.reminder) }}
                    </div>
                    <span v-else>-</span>
                </template>
                <template v-if="column.key === 'description'">
                    <a-tooltip v-if="record.description" :title="record.description">
                        <span class="description-text">{{ record.description }}</span>
                    </a-tooltip>
                    <span v-else>-</span>
                </template>
                <template v-if="column.key === 'action'">
                    <a-space>
                        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                        <a-button type="link" danger @click="handleDelete(record)">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>

        <!-- 筛选区域 -->
        
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { BellOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import { EVENT_TYPES } from '~/utils/enums'

const props = defineProps({
    scheduleList: {
        type: Array,
        required: true
    },
    showDateFilter: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['edit', 'delete'])


// 表格列定义
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        width: '20%'
    },
    {
        title: '开始时间',
        dataIndex: 'start',
        key: 'start',
        width: '15%'
    },
    {
        title: '结束时间',
        dataIndex: 'end',
        key: 'end',
        width: '15%'
    },
    {
        title: '提醒时间',
        dataIndex: 'reminder',
        key: 'reminder',
        width: '15%'
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        width: '20%'
    },
   /*  {
        title: '操作',
        key: 'action',
        width: '15%'
    } */
]

// 筛选状态
const dateRange = ref([])
const typeFilter = ref(undefined)

// 筛选后的日程列表
const filteredSchedules = computed(() => {
    let result = props.scheduleList

    // 日期范围筛选
    if (dateRange.value && dateRange.value.length === 2) {
        const [start, end] = dateRange.value
        result = result.filter(schedule => {
            const scheduleDate = new Date(schedule.start)
            return scheduleDate >= start && scheduleDate <= end
        })
    }

    // 类型筛选
    if (typeFilter.value) {
        result = result.filter(schedule => schedule.type === typeFilter.value)
    }

    return result
})

// 获取事件类型颜色
const getEventTypeColor = (type) => {
    return EVENT_TYPES[type?.toUpperCase()]?.color || 'default'
}

// 获取事件类型文本
const getEventTypeText = (type) => {
    return EVENT_TYPES[type?.toUpperCase()]?.text || '未知'
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
    if (!dateStr) return '-'
    const date = new Date(dateStr)
    return date.toLocaleString()
}

// 处理日期范围变化
const handleDateRangeChange = () => {
    // 可以在这里添加其他处理逻辑
}

// 处理类型筛选变化
const handleTypeFilterChange = () => {
    // 可以在这里添加其他处理逻辑
}
</script>

<style scoped>
.schedule-list {
    padding: 0 20px;
}

.schedule-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reminder-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.description-text {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-container {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
}
</style>
